<template>
  <div class="content">
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="订单状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择订单状态"
            clearable
            style="width: 200px"
          >
            <el-option label="未支付" value="unpaid"></el-option>
            <el-option label="已支付" value="paid"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="退款中" value="refunding"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getTableInfo">搜索</el-button>
          <el-button
            type="info"
            @click="
              searchForm = {
                status: '',
                create_time: [],
              }
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" row-key="order_id" height="100%" stripe :border="true">
      <el-table-column prop="order_id" label="ID" fixed="left"></el-table-column>
      <el-table-column prop="station.title" label="站点名称" />
      <el-table-column prop="user.nickName" label="用户">
        <template #default="scope">
          <p v-if="scope.row.user.nickName">{{ scope.row.user.nickName }}</p>
          <p v-if="scope.row.user.mobile">{{ scope.row.user.mobile }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="fee" label="金额" />
      <el-table-column prop="final_fee" label="最终金额" />
      <el-table-column prop="created_at" label="订单创建时间" />
      <el-table-column prop="start_time" label="订单开始时间" />
      <el-table-column prop="end_time" label="订单结束时间" />
      <el-table-column label="使用时长">
        <template #default="scope">
          <p v-if="scope.row.duration">{{ formatDuration(scope.row.duration) }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="refund_fee" label="退款金额" />
      <el-table-column prop="add_date" label="订单状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 'unpaid'" type="danger">未支付</el-tag>
          <el-tag v-if="scope.row.status === 'paid'" type="primary">已支付</el-tag>
          <el-tag v-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
          <el-tag v-if="scope.row.status === 'refunding'" type="warning">退款中</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-divider border-style="none" />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="curPage"
      :page-size="pageSize"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getOrderListApi } from "@/api/babycar";
const total = ref(0);
const curPage = ref(1);
const pageSize = ref(20);
const tableData = ref([]);
const searchForm = ref({
  status: "",
  create_time: [],
});
// 格式化秒数为 时:分:秒 格式
const formatDuration = (seconds: number): string => {
  if (!seconds || seconds <= 0) return "00:00:00";

  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  // 补零格式化
  const formatHours = hours.toString().padStart(2, "0");
  const formatMinutes = minutes.toString().padStart(2, "0");
  const formatSeconds = secs.toString().padStart(2, "0");

  return `${formatHours}:${formatMinutes}:${formatSeconds}`;
};

onMounted(() => {
  getTableInfo();
});
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTableInfo();
};
const handleCurrentChange = (val: number) => {
  curPage.value = val;
  getTableInfo();
};
function getTableInfo() {
  getOrderListApi({
    page: curPage.value,
    pageSize: pageSize.value,
    status: searchForm.value.status,
    start_time: searchForm.value.create_time[0] ?? "",
    end_time: searchForm.value.create_time[1] ?? "",
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
</script>

<style lang="scss">
.common-seach-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-input {
    width: 300px;
  }
}
.el-tabs {
  .el-tabs__new-tab {
    width: auto !important;
  }
}
.table-box {
  height: calc(100% - 200px);
}
</style>
